<template>
  <div v-title="'班线售票明细 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="sale-detail-list PublicListStyle">
      <template v-if='beforeGetFocus'>
        <div class='searchDiv marginBottom-20'>
          <i class='el-icon-search searchBtn'></i>
          <el-input placeholder="车站名称" class='searchInput' @focus='onFousEvent'></el-input>
        </div>
      </template>
      <template v-else>
        <div class='onfousInput marginBottom-20'>
          <div class='onfocusInputContent'>
            <i class='el-icon-search searchBtn1'></i>
            <el-input placeholder="车站名称"  class='searchInput1' :maxlength='20' v-model='searchCondition.search' @keyup.native.enter='loadList(1)' ref='searchInput1'></el-input>
            <i class='el-icon-close closeSearch' @click='closeSearch'></i>
            <el-button type='primary' class='btn-cancel resetCustomer' @click='resetCondition'>条件重置</el-button>
            <el-button type='primary' class='btn-primary searchCustomer' @click='loadList(1)'>搜索</el-button>
            <div class='lineStyle'></div>
            <div class='conditionBtn'>
              更多条件筛选
           </div>
            <div class='searchByCondition' >
              <el-form :inline="true" class="demo-form-inline" ref='searchForm' :model='searchCondition'>
                <el-form-item label="发车时间从" style='margin-right:15px;'>
                  <el-date-picker v-model="searchCondition.rideTimeOne" type="datetime"
                                  placeholder="开始时间" :editable="false" format="yyyy-MM-dd HH:mm"
                                  @change="changeDate('rideTimeOne')"></el-date-picker>
                </el-form-item>
                <el-form-item label="到">
                  <el-date-picker v-model="searchCondition.rideTimeTwo" type="datetime"
                                  placeholder="结束时间" :editable="false" format="yyyy-MM-dd HH:mm"
                                  @change="changeDate('rideTimeTwo')"></el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </template>

      <div class="primary_bg tabContainer trHasCursor" v-loading="isLoading" element-loading-text="拼命加载中">
        <el-table :data="tableData.elements"
                  @row-click="openDetail">
          <el-table-column label="发车时间" prop="rideTime"
                           width="170px"></el-table-column>
          <el-table-column label="乘车车站" prop="startSite"
                           show-overflow-tooltip></el-table-column>
          <el-table-column label="途径站" prop="midWaySite"
                           show-overflow-tooltip></el-table-column>
          <el-table-column label="终点站" prop="endSite"
                           show-overflow-tooltip></el-table-column>
          <el-table-column label="总票数" prop="totalTicket"
                           width="110px"></el-table-column>
          <el-table-column label="剩余票数" prop="remainTicket"
                           width="110px"></el-table-column>
          <el-table-column label="已售票数" prop="sellOutTicket"
                           width="110px"></el-table-column>
          <el-table-column label="待验证票数" prop="waitCheckTotal"
                           width="110px"></el-table-column>
          <el-table-column label="已验证票数" prop="checkedTotal"
                           width="110px"></el-table-column>
        </el-table>

        <el-pagination v-if="parseInt(tableData.totalAmount)>0"
                       :current-page="tableData.page" :page-size="tableData.size"
                       :total="parseInt(tableData.totalAmount)" layout="total, prev, pager, next"
                       @current-change="loadList"></el-pagination>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import ticketService from '../../../services/ticket'
//    import MkPermission from "../../../components/MkPermission";
  import {mapState} from 'vuex'
  export default {
    name: 'MkHandleRecords',

    components: {
      MkBreadcrumb
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall
    }),
    props: ['activeName'],

    methods: {
      loadList (pageValue) {
        let hasCondition = false;
        for (let item in this.searchCondition) {
          if (this.searchCondition[item] && item !== 't' && item !== 'page.size' && item !== 'page.pn') {
            hasCondition = true;
          }
        }
        if (hasCondition) {
          this.isLoading = true;
          if (pageValue) {
            this.searchCondition['page.pn'] = pageValue;
          }
          ticketService.loadSaleDetailListServer (this.searchCondition, data => {
            this.tableData = data.data;
            this.isLoading = false;
          });
        } else {
          this.isLoading = false;
          this.tableData = {};
        }
      },

      changeDate (type) {
        if (this.searchCondition[type]) {
          this.searchCondition[type] = new Date(this.searchCondition[type]).pattern('yyyy-MM-dd HH:mm');
        } else {
          this.searchCondition[type] = '';
        }
        if ((this.searchCondition.rideTimeOne && this.searchCondition.rideTimeTwo) || (!this.searchCondition.rideTimeOne && !this.searchCondition.rideTimeTwo)) {
          this.loadList(1);
        }
      },

      openDetail (row) {
        this.$router.push({name: 'ticketItemDetail', params: {id: row.id}});
      },

      onFousEvent() {
        this.beforeGetFocus = false;
        this.$nextTick(() => {
          this.$refs.searchInput1.$el.children[0].focus();
        });
      },

      closeSearch() {
        this.beforeGetFocus = true;
        this.resetCondition();
      },

      resetCondition() {
        this.searchCondition['page.pn'] = 1;
        this.searchCondition.search = '';
        this.searchCondition.rideTimeOne = '';
        this.searchCondition.rideTimeTwo = '';
        this.tableData = {};
      }
    },

    data () {
      return {
        beforeGetFocus: true,
        isLoading: false,
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          search: '',
          rideTimeOne: '',
          rideTimeTwo:''
        },
        tableData: {},
        breadcrumbData: {
          list: {
            first: {name:'票务管理',path: null, isClickAble: false},
            second: {name: '班线售票明细',path: null, isClickAble: false},
          },
          menuIconStyle : 'ticketIconStyle'
        }
      }
    }
  }
</script>

<style lang='less'>
</style>
